<template>
    <div class="w-full overflow-scroll" style="background-color: var(--boxborder);">
        <div class="bg-light-50 rounded-md">
            <div class="w-full mt-2 flex justify-center items-center">
                <div class="rounded-2xl border-gray-700 scroll w-64 border-2 flex justify-center items-center">
                    <div class="w-32 h-6 leading-6 text-center rounded-2xl hover:bg-[rgba(100,100,100,0.3)]"
                        :style="`background-color:${choiced ? 'rgba(100,100,100,1)' : ''};   color:${choiced ? 'white' : 'black'}`"
                        @click="changeChoiced('1')">
                        <span style="cursor:pointer">最近新歌</span>
                    </div>
                    <div class="w-32 h-6 leading-6 text-center rounded-2xl hover:bg-[rgba(100,100,100,0.3)]"
                        :style="`background-color:${!choiced ? 'rgba(100,100,100,1)' : ''};  color:${!choiced ? 'white' : 'black'}`"
                        @click="changeChoiced('2')">
                        <span style="cursor:pointer">本周专辑</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full mt-4">
            <MusicNewMusic class="w-[90%] ml-[6%]" v-if="choiced" />
        </div>
        <div class="w-full mt-4 ">
            <MusicNewAlbum class="w-[90%] ml-[6%]" v-if="!choiced" />
        </div>
    </div>
</template>
<script setup>
// 导入数据
import { ref } from 'vue';
// 顶部导航选择
const choiced = ref(true);
const changeChoiced = function (key) {
    choiced.value = !choiced.value;
    if (key == 1 && choiced.value === false) choiced.value = !choiced.value;
    if (key == 2 && choiced.value === true) choiced.value = !choiced.value;
};
</script>
<style lang="less">
.true {
    font-weight: 700;
    border-bottom: red solid 3px;
    font-size: medium;
    border-style: groove;
}

.false {
    font-weight: 500;
}
</style>
